<template>
  <div class="bgimg">
    <div class="middle">
      <h1>欢迎登陆矿校云平台</h1>
      <hr />
      <p>{{now}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      now: ""
    };
  },
  methods: {
    format(date, fmt) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    }
  },
  created() {
    this.now = this.format(new Date(), "YYYY年mm月dd日 HH:MM:SS");
  },
  mounted() {
    this.timer = setInterval(() => {
      this.now = this.format(new Date(), "YYYY年mm月dd日 HH:MM:SS");
    }, 1000);
    console.log(this.timer);
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style>
/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body,
html {
  height: 100%;
}

.bgimg {
  /* Background image */
  background-image: url("/static/img/bg.jpg");
  /* Full-screen */
  height: 100%;
  /* Center the background image */
  background-position: center;
  /* Scale and zoom in the image */
  background-size: cover;
  /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
  position: relative;
  /* Add a white text color to all elements inside the .bgimg container */
  color: #000;
  /* Add a font */
  font-family: "Courier New", Courier, monospace;
  /* Set the font-size to 25 pixels */
  font-size: 25px;
}

/* Position text in the top-left corner */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

/* Position text in the bottom-left corner */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

/* Position text in the middle */
.middle {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Style the <hr> element */
hr {
  margin: auto;
  width: 40%;
}
</style>
